import React, { Component } from "react";
import classNames from "classnames";
import "./App.scss";

export default class App extends Component {
  state = {
    isShow: false,
  };
  render() {
    return (
      <div>
        <button
          onClick={() =>
            this.setState((state) => ({
              isShow: !state.isShow,
            }))
          }
        >
          toggle
        </button>
        <h1 className="title size active">App</h1>
        <h1 className={classNames("title", "size", "active")}>App</h1>
        <h1 className={classNames(["title", "size", "active"])}>App</h1>
        <h1
          className={classNames([
            "title",
            "size",
            this.state.isShow ? "active" : "",
          ])}
        >
          App
        </h1>
        <h1
          className={classNames([
            "title",
            "size",
            { active: this.state.isShow },
          ])}
        >
          App
        </h1>
        <h1
          className={classNames({
            title: true,
            size: true,
            active: this.state.isShow,
          })}
        >
          App
        </h1>
      </div>
    );
  }
}
